<template>
    <div class="aa">
          <van-area title="选择省" :area-list="areaList" :columns-num="1" @cancel="cancels" @change="changes" @confirm="confirms"/>
          <div class="bb"></div>
    </div>
    
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { areaList } from '@vant/area-data';
import { useRouter } from 'vue-router'
import {cityInfoStore} from "../../../store/index"

let store=cityInfoStore();
const router = useRouter()
let res=ref('')

const cancels=()=>{
    router.go(-1)
}

const changes=(e:any)=>{
    console.log(e);
    res.value=e.selectedOptions[0].text;
   
}

const confirms=()=>{
    store.setCityInfo(res.value)
    router.push("/analyse/citylist")
}
</script>
<style scoped lang="scss">
.aa{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.bb{
    flex: 1;
    background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201403%2F30%2F20140330065926_QrtBc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686363289&t=b55e252b237cec4aff65090ca1113716');
    background-size: cover;
}
</style>